/**
 * 项目入口文件
 * 负责初始化Vue实例并挂载到DOM
 */
import './permission' // permission control
// 导入Vue核心库
import Vue from 'vue'
// 导入根组件
import App from './App.vue'
// 导入路由配置
import router from './router'
// 导入状态管理
import store from './store'
// 导入模板验证器（仅开发环境使用）
import TemplateValidator from './utils/templateValidator'
// 导入WebSocket API
import { websocketApi } from '@/api/websocket'
// 按需导入Vant UI组件
import { Button, Cell, CellGroup, Icon, Tabbar, TabbarItem, NavBar, Form, Field, Toast, Popup, Tab, Tabs, PullRefresh, Empty, Loading, ActionSheet, Dialog, Switch, Swipe, SwipeItem, Tag, Checkbox, CheckboxGroup, Sticky, Search, List, Grid, GridItem } from 'vant'

// 注册Vant组件
Vue.use(Button)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Icon)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(PullRefresh)
Vue.use(Empty)
Vue.use(Loading)
Vue.use(ActionSheet)
Vue.use(Dialog)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(NavBar)
Vue.use(Form);
Vue.use(Field)
Vue.use(Toast)
Vue.use(Popup)
Vue.use(Switch)
Vue.use(Swipe)
Vue.use(SwipeItem);
Vue.use(Tag);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Sticky);
Vue.use(Search);
Vue.use(List);
Vue.use(Grid);
Vue.use(GridItem);

// 在开发环境下启用模板验证器
if (process.env.NODE_ENV !== 'production') {
    Vue.use(TemplateValidator);
}

// 导入全局样式，会应用到整个应用
import './styles/reset.scss';

// Vant组件已在上方按需引入

// 关闭生产环境提示
Vue.config.productionTip = false

/**
 * 创建Vue根实例
 * 将路由、状态管理挂载到Vue实例上
 * 渲染根组件App
 * 最后挂载到id为app的DOM元素上
 */
const app = new Vue({
    router, // 注入路由
    store,  // 注入状态管理
    render: h => h(App) // 渲染App组件
}).$mount('#app') // 挂载到#app元素

// 初始化WebSocket连接
if (store.getters.isLogin) {
    websocketApi.connect()
}

// 监听登录状态变化
store.watch(
    (state) => state.isLogin,
    (isLogin) => {
        if (isLogin) {
            // 登录后连接WebSocket
            websocketApi.connect()
        } else {
            // 登出后断开WebSocket
            websocketApi.disconnect()
        }
    }
)